<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <title>用户</title>
    <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no'
          name='viewport'/>
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/js/plugin/bootstrap-table/bootstrap-table.min.css">
    <link rel="stylesheet"
          href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i">
    <link rel="stylesheet" href="assets/css/ready.css">
    <link rel="stylesheet" href="assets/css/demo.css">
    <link rel="stylesheet" href="jQueryMsg/css/message.css">
    <link rel="stylesheet" href="assets/js/core/jstree/themes/default/style.min.css">

    <style>
        .table td, .table th {
            padding: 0.25rem !important;
        }

        .fixed-table-container tbody td, .fixed-table-container thead th {
            padding: 0px;
        }
        [type="radio"]:not(:checked), [type="radio"]:checked{
            /*left: 0px;*/
            position: static;
        }
    </style>

</head>
<body style="min-width: 555px">
<div class="wrapper">
    <div class="main-header">

        <!--logo-->
        <div class="logo-header">
            <a href="index.html" class="logo">
                教学实训管理系统
            </a>
            <button class="navbar-toggler sidenav-toggler ml-auto" type="button" data-toggle="collapse"
                    data-target="collapse" aria-controls="sidebar" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <button class="topbar-toggler more"><i class="la la-ellipsis-v"></i></button>
        </div>
        <nav class="navbar navbar-header navbar-expand-lg">
            <div class="container-fluid">

                <!--学生管理-->
                <ul class="navbar-nav topbar-nav ml-md-auto align-items-center">
                    <li class="nav-item dropdown hidden-caret">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <i class="la la-bell"></i>
                            <span id="messageLen" class="notification" style="display: none"></span>
                        </a>
                        <ul id="dialogueMessage" class="dropdown-menu notif-box" aria-labelledby="navbarDropdown">

                        </ul>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="dropdown-toggle profile-pic" data-toggle="dropdown" href="#" aria-expanded="false">
                            <img src="assets/img/profile.jpg" alt="user-img" width="36"
                                 class="img-circle"><span id="userName1"></span></span> </a>
                        <ul class="dropdown-menu dropdown-user">
                            <a id="resetPass" class="dropdown-item" href="#"><i class="fa fa-power-off"></i> 修改密码</a>
                            <a id="logout" class="dropdown-item" href="#"><i class="fa fa-power-off"></i> Logout</a>
                        </ul>
                        <!-- /.dropdown-user -->
                    </li>
                </ul>
            </div>
        </nav>
    </div>
    <div class="sidebar">
        <div class="sidebar-wrapper">

            <!--左侧导航-->
            <ul class="nav">
                <li class="nav-item">
                    <a href="index.html">
                        <i class="la la-dashboard"></i>
                        <p>home</p>
                        <!--<span class="badge badge-count">5</span>-->
                    </a>
                </li>
                <li id="1" style="display: block" class="nav-item active">
                    <a href="user.html">
                        <i class="la la-table"></i>
                        <p>用户</p>
                        <!--<span class="badge badge-count">14</span>-->
                    </a>
                </li>
                <li id="2" style="display: block" class="nav-item">
                    <a href="role.html">
                        <i class="la la-keyboard-o"></i>
                        <p>角色</p>
                        <!--<span class="badge badge-count">50</span>-->
                    </a>
                </li>
                <li id="3" style="display: block" class="nav-item">
                    <a href="questions.html">
                        <i class="la la-th"></i>
                        <p>留言</p>
                        <!--<span class="badge badge-count">6</span>-->
                    </a>
                </li>
                <li id="4" style="display: block" class="nav-item">
                    <a href="submission.html">
                        <i class="la la-bell"></i>
                        <p>日记记录</p>
                        <!--<span class="badge badge-success">3</span>-->
                    </a>
                </li>
                <li id="5" style="display: block" class="nav-item">
                    <a href="audit.html">
                        <i class="la la-font"></i>
                        <p>日记审核</p>
                        <span id="diaryLen" class="badge badge-danger"></span>
                    </a>
                </li>
                <li id="6" style="display: block" class="nav-item active">
                    <a href="student.html">
                        <i class="la la-table"></i>
                        <p>学生管理</p>
                        <!--<span class="badge badge-count">14</span>-->
                    </a>
                </li>
                <li id="7" style="display: block" class="nav-item active">
                    <a href="department.html">
                        <i class="la la-table"></i>
                        <p>组织机构管理</p>
                        <!--<span class="badge badge-count">14</span>-->
                    </a>
                </li>
            </ul>
        </div>
    </div>

    <!--main-->
    <div class="main-panel">
        <div class="content">
            <div class="container-fluid">
                <h4 class="page-title">组织机构树</h4>
                <!--表格-->
                <div class="col-md-4" >

                </div>
                <div class="col-md-4" >
                    <button type="button" class="btn btn-success" data-toggle="modal" data-target="#newDept" onclick="setOpt('add')">新增</button><!-data-toggle="modal" data-target="#doMenu"-->
                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#newDept" onclick="setOpt('edit')">编辑</button>
                    <button type="button" class="btn btn-danger" onclick="doDelDept()">删除</button>
                    <button type="button" class="btn btn-success" onclick="refreshTree()">刷新</button>
                    <div id="treeview1" ></div><!--class="treeview"-->
                </div>
                <div class="col-md-4" ></div>
            </div>
        </div>
        <footer class="footer">
            <div class="container-fluid">
                <nav class="pull-left">
                    <ul class="nav">
                        <li class="nav-item">
                            <a class="nav-link" href="#">
                                反馈
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">
                                帮助
                            </a>
                        </li>
                    </ul>
                </nav>
                <div class="copyright ml-auto">
                    2018.11.21
                </div>
            </div>
        </footer>
    </div>
</div>
<!-- 模态框（Modal） -->
<!-- 模态框（Modal） -->

<!-- 模态框（Modal） -->
<div class="modal fade" id="newDept" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                <h4 class="modal-title" id="myModalLabel2" style="text-align: left">维护部门机构 </h4>
            </div>
            <div class="modal-body">
                <form role="form" name="addMenuForm" id="addMenuForm">
                    <input type="hidden" id="parentId" />
                    <input type="hidden" id="deptId" />
                    <input type="hidden" id="opt" />
                    <div class="form-group">
                        <label for="name">名称</label>
                        <input type="text" class="form-control" id="name" name="name" placeholder="请输入名称" required>
                    </div>
                    <div class="form-group">
                        <label for="desc">描述</label>
                        <input type="text" class="form-control" id="desc" name="desc" placeholder="请输入描述" required>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" onclick="clearForm()" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="dealDept()" data-dismiss="modal">提交</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<br/>


<div class="modal fade" id="delModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    <!--&times;-->
                </button>
                <h4 class="modal-title" id="myModalLabel3">
                    提示
                </h4>
            </div>
            <div class="modal-body">
                确定要删除吗？
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消
                </button>
                <button type="button" class="btn btn-primary" onclick="doDelMenu()">
                    删除
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

<div class="modal fade" id="promptModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    <!--&times;-->
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    提示
                </h4>
            </div>
            <div class="modal-body">
                请选择一项菜单！
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
</div>
</body>
<script src="assets/js/core/jquery.3.2.1.min.js"></script>
<script src="assets/js/core/popper.min.js"></script>
<script src="assets/js/core/bootstrap.min.js"></script>
<script src="assets/js/plugin/bootstrap-table/bootstrap-table-zh-CN.min.js"></script>
<script src="assets/js/plugin/bootstrap-table/bootstrap-table.min.js"></script>
<script src="assets/js/plugin/jquery-scrollbar/jquery.scrollbar.min.js"></script>
<script src="assets/js/ready.min.js"></script>
<script src="jQueryMsg/js/message.js"></script>
<script src="assets/js/core/jstree/jstree.js"></script>
<script>
    var token;
    var deptTree;
    $(function () {
        // debugger
        token = sessionStorage.getItem('token')
        //var oTable = new TableInit();
        //oTable.Init();
        //getPower()
        //dialogueMessage()
        //audit();
        //roleSelect();
        initDepartmentTree();
        //clearForm();
    });

    function initDepartmentTree(){
        deptTree = $('#treeview1');
        $('#treeview1').data('jstree', false).empty();
        $.getJSON('/oa/t-department/listTree?token='+token, function(json){
            console.log(json);
            $('#treeview1').jstree({
                "core": {
                    'data': json.data
                },
                "types" : {
                    "#" : {
                        "max_children" : 1,
                        "max_depth" : 4,
                        "valid_children" : ["root"]
                    },
                    "root" : {
                        "icon" : "/static/3.3.12/assets/images/tree_icon.png",
                        "valid_children" : ["default"]
                    },
                    "default" : {
                        "valid_children" : ["default","file"]
                    },
                    "file" : {
                        "icon" : "glyphicon glyphicon-file",
                        "valid_children" : []
                    }
                },
                "plugins" : [
                    "contextmenu", "dnd", "search",
                    "state", "types", "wholerow"
                ]
            })
        });
        $('#treeview1').on('changed.jstree',function (node,data){
            //console.log(node);
            //console.log(data.node.original);
            let id = data.instance.get_node(data.selected[0]).id;//节点点击事件 获取ID
            let name = data.instance.get_node(data.selected[0]).text;
            let parentId = data.node.original.parentId;
            let desc = data.node.original.desc;
            console.log(id + "===" + name + "===" + parentId + "===" + desc);
            $('#parentId').val(parentId);
            $('#name').val(name);
            $('#desc').val(desc);
            $('#deptId').val(id);
            //ClickMenuTree(id);
        });
        $('#treeview1').on('loaded.jstree', function (e, data) {
            data.instance.open_all();//默认展开所有节点
        })
    }

    function clearForm(){
        $('#deptId').val("");
        $('#parentId').val("");
        $('#name').val("");
        $('#desc').val("");
        $('#opt').val("");
    }

    function setOpt(opt) {
        $('#opt').val(opt);
        if(opt=='add'){
            $('#parentId').val("");
            $('#name').val("");
            $('#desc').val("");
            //$('#opt').val("");
        }
    }
    function dealDept(){
        let opt = $("#opt").val();
        if(opt == 'edit'){
            doEditDept();
        }else{
            doAddDept();
        }
    }
    function doAddDept() {
        var parentId = $("#deptId").val();
        if(parentId == null || parentId == "") {
            parentId = 0;
        }
        var deptName = $("#name").val();
        var deptDesc = $("#desc").val();
        var param = {
            parentId : parentId,
            deptName : deptName,
            deptDesc : deptDesc
        };
        $.ajax({
            type : "post",
            dataType: 'json',
            url : '/oa/t-department/addDept',
            data: JSON.stringify(param),
            headers: {
                token: "" + token
            },
            contentType: 'application/json; charset=UTF-8',
            success : function(data) {
                if (data.code == 200){
                    refreshTree();
                }
                clearForm();
            },
            error : function() {
                clearForm();
            }
        });
    }
    function doEditDept() {
        let parentId = $('#parentId').val();
        let name = $('#name').val();
        let desc = $('#desc').val();
        let id = $('#deptId').val();
        let param = {
            parentId: parentId,
            deptId: id,
            deptName: name,
            deptDesc: desc
        }
        $.ajax({
            type : "post",
            dataType: 'json',
            url : '/oa/t-department/updateDept',
            data: JSON.stringify(param),
            headers: {
                token: "" + token
            },
            contentType: 'application/json; charset=UTF-8',
            success : function(data) {
                if (data.code == 200){
                    refreshTree();
                }
                clearForm();
            },
            error : function() {
                clearForm();
            }
        });
    }

    function doDelDept() {
        let deptId = $("#deptId").val();
        let param = {
            deptId : deptId
        };
        $.ajax({
            type : "post",
            dataType: 'json',
            url : '/oa/t-department/deleteDept',
            data: param,
            headers: {
                token: "" + token
            },
            //contentType: 'application/json; charset=UTF-8',
            success : function(data) {
                if (data.code == 200 && data.msg == "删除成功"){
                    $('#treeview1').jstree('destroy');
                    $('#treeview1').data('jstree', false).empty();
                    $.getJSON('/oa/t-department/listTree?token='+token, function(json){
                        console.log(json);
                        $('#treeview1').jstree({
                            "core": {
                                'data': json.data
                            },
                            "types" : {
                                "#" : {
                                    "max_children" : 1,
                                    "max_depth" : 4,
                                    "valid_children" : ["root"]
                                },
                                "root" : {
                                    "icon" : "/static/3.3.12/assets/images/tree_icon.png",
                                    "valid_children" : ["default"]
                                },
                                "default" : {
                                    "valid_children" : ["default","file"]
                                },
                                "file" : {
                                    "icon" : "glyphicon glyphicon-file",
                                    "valid_children" : []
                                }
                            },
                            "plugins" : [
                                "contextmenu", "dnd", "search",
                                "state", "types", "wholerow"
                            ]
                        })
                    });
                }else{
                    alert(data.message);
                }
            },
            error : function() {
                clearForm();
            }
        });

    }

    function refreshTree(){
        //initDepartmentTree();
        //$('#treeview1').jstree(true).refresh();
        $('#treeview1').jstree('destroy');
        $('#treeview1').data('jstree', false).empty();
        $.getJSON('/oa/t-department/listTree?token='+token, function(json){
            console.log(json);
            $('#treeview1').jstree({
                "core": {
                    'data': json.data
                },
                "types" : {
                    "#" : {
                        "max_children" : 1,
                        "max_depth" : 4,
                        "valid_children" : ["root"]
                    },
                    "root" : {
                        "icon" : "/static/3.3.12/assets/images/tree_icon.png",
                        "valid_children" : ["default"]
                    },
                    "default" : {
                        "valid_children" : ["default","file"]
                    },
                    "file" : {
                        "icon" : "glyphicon glyphicon-file",
                        "valid_children" : []
                    }
                },
                "plugins" : [
                    "contextmenu", "dnd", "search",
                    "state", "types", "wholerow"
                ]
            })
        });
        $('#treeview1').on('changed.jstree',function (node,data) {
            //console.log(node);
            //console.log(data.node.original);
            let id = data.instance.get_node(data.selected[0]).id;//节点点击事件 获取ID
            let name = data.instance.get_node(data.selected[0]).text;
            let parentId = data.node.original.parentId;
            let desc = data.node.original.desc;
            console.log(id + "===" + name + "===" + parentId + "===" + desc);
            $('#parentId').val(parentId);
            $('#name').val(name);
            $('#desc').val(desc);
            $('#deptId').val(id);
        });
        $('#treeview1').on('loaded.jstree', function (e, data) {
            data.instance.open_all();//默认展开所有节点
        })
    }
</script>
<!--<script src="power.js"></script>-->

</html>